import { useStore } from "vuex"
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
/**
 * 基础功能混合文件
 * $store      vuex
 * $router     路由
 * $router     基于element-plus的确认框
 * ElMessage   基于element-plus的消息提示
 */
export default () => {
  /**
   * 确认框
   * @param {Object} content 内容 可传入html代码
   * @param {Object} title 标题
   * @param {Object} btnRed 是否红色按钮
   */
  const ElConfirm = (content: string, title: string, btnRed: boolean = false) => {
    return new Promise((resolve, reject) => {
      ElMessageBox.confirm(content, `${title || '提示'}`, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        showClose: false, // 是否显示右上角的关闭按钮
        closeOnClickModal: false, // 是否可通过点击遮罩关闭 MessageBox
        closeOnPressEscape: false, // 是否可通过按下 ESC 键关闭 MessageBox
        dangerouslyUseHTMLString: true, // 是否将 message 属性作为 HTML 片段处理
        confirmButtonClass: btnRed ? 'el-button--danger' : 'el-button--primary' // 确定按钮的自定义类名
      }).then(() => {
        resolve(null)
      }).catch((err) => {
        reject(err)
      })
    })
  }
    
  return {
    Store: useStore(),
    Router: useRouter(),
    ElConfirm,
    ElMessage
  }
}
